<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="会员手机号">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="昵称">
                            <el-input v-model="form.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="会员姓名">
                            <el-input v-model="form.realName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="美学设计师手机号">
                            <el-input v-model="form.refereePhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="注册时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="dates"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="账号状态">
                            <el-select v-model="form.status" placeholder="请选择账号状态">
                            <el-option label="开" value="0"></el-option>
                            <el-option label="关" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="callFn()">调用</el-button>
                        <el-button type="primary" @click="toRoutes('vipAdd')">新增</el-button>
                        <el-button type="primary" @click="warningStatus('你好成功')">成功</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    prop="userId"
                    label="用户ID"
                >
                </el-table-column>
                <el-table-column
                    prop="nickName"
                    label="会员昵称"
                >
                </el-table-column>
                <el-table-column
                    prop="realname"
                    label="会员姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="会员手机号"
                >
                </el-table-column>
                <el-table-column
                    label="证件类型"
                    prop="identityType"
                >
                </el-table-column>
                <el-table-column
                    prop="identity"
                    label="证件号码"
                >
                </el-table-column>
                <el-table-column
                    prop="refereeName"
                    label="设计师姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="referee"
                    label="设计师手机号"
                >
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    label="注册时间"
                >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                >
                    <template slot-scope="scope">
                        <el-button type="text" v-if="scope" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="form.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import vipManage from '@/api/vipManage'
import { async } from 'q'
    export default {
        name:"vipIndex",
        data() {
            return {
                tableLoading:false,
                dates:[],
                form: {
                    pageNum:1,
                    pageSize:10,
                },
                tableData: [
                    {
                        userId:123 
                    }
                ],
                page_sizes:[10,30,50,100],
                page_totals:60,
            }
        },
        mounted(){
            // this.getList(this.form)
            this.ac()
        },
        methods: {
            ac(){
                let getData3 = () => {
                    return new Promise((resolve,reject) => {
                        setTimeout(() => {
                            let username = 'good day';
                            resolve(username);
                        },2000);
                    });
                }
                let test2 = async () => {
                    let data = await getData3();
                    // console.log(data);
                }
                test2()
            },
            //获取列表
            getList(e){
                vipManage.getList(e).then(res =>{
                    if(!res.data.code){
                        this.tableData = res.data.data.list
                    }else{
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                })
                .catch(err =>{
                    this.errorStatus(err)
                })
            },
            // 调用动作
            callFn(){
                let defineFn = ()=>{
                    // console.log("函数")
                    this.succStatus("hello，world")
                }
                let confirmDatas = {
                    desc:'删除该条数据, 是否继续?',
                    title:"提示",
                    confirmBtnTxt:'确定',
                    cancelBtnTxt:'取消',
                    fn:defineFn,
                    catchInfo:'已取消删除'
                }
                this.eleConfirm(confirmDatas)
            },
            //confirm框
            eleConfirm(e){
                this.$confirm(e.desc,e.title,{
                    confirmButtonText: e.confirmBtnTxt,
                    cancelButtonText: e.cancelBtnTxt,
                    type: 'warning'
                }).then(() => {
                    e.fn()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: e.catchInfo
                    }); 
                });
            },
            //弹窗组件
            eleMsg(txt,status){
                this.$message({
                    showClose: true,
                    message: txt,
                    type: status
                });
            },
            //成功状态弹窗
            succStatus(txt,status){
                this.eleMsg(txt,'success')
            },
            //失败状态弹窗
            errorStatus(txt){
                this.eleMsg(txt,'error')
            },
            // 警告状态弹窗
            warningStatus(txt){
                this.eleMsg(txt,'warning')
            },
            // 路由跳转
            toRoutes(e,userId) {
                let route = {name:e,query:{userId:userId}}
                this.$router.push(route)
            },
            //改变页面条数
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList(this.form)
            },
            //选择页数
            handleCurrentChange(val) {
                this.form.pageNum = val
                this.getList(this.form)
            }
        }
    }
</script>
<style scoped>

</style>
